<template>
  <div id="space-analysis-page">
    <a-row :gutter="[16, 16]">
      <a-col :sm="24" :md="16" :xl="18">
        <a-card>
          <template #title>
            <a-flex justify="space-between">
              <a-space><h3>分析详情</h3></a-space>
              <a-space>
                <RouterLink to="/">返回</RouterLink>
              </a-space>
            </a-flex>
          </template>

          <a-tabs type="card" v-model:value="selectedKey">
            <a-tab-pane key="1" tab="使用情况分析">
              <SpaceUsageAnalysis
                :query-all="queryAll"
                :query-public="queryPublic"
                :space-id="spaceId"
              />
            </a-tab-pane>
            <a-tab-pane key="2" tab="图库分类分析">
              <SpaceCategoryAnalysis
                :query-all="queryAll"
                :query-public="queryPublic"
                :space-id="spaceId"
              />
            </a-tab-pane>
            <a-tab-pane key="3" tab="图库标签分析">
              <SpaceTagAnalysis
                :query-all="queryAll"
                :query-public="queryPublic"
                :space-id="spaceId"
              />
            </a-tab-pane>
            <a-tab-pane key="4" tab="图库大小分析">
              <SpaceSizeAnalysis
                :query-all="queryAll"
                :query-public="queryPublic"
                :space-id="spaceId"
              />
            </a-tab-pane>
            <a-tab-pane key="5" tab="用户使用分析">
              <SpaceUserAnalysis
                :query-all="queryAll"
                :query-public="queryPublic"
                :space-id="spaceId"
              />
            </a-tab-pane>
            <a-tab-pane key="6" tab="图库排行分析">
              <SpaceRankAnalysis
                :query-all="queryAll"
                :query-public="queryPublic"
                :space-id="spaceId"
              />
            </a-tab-pane>
          </a-tabs>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import SpaceUsageAnalysis from '@/components/analysis/SpaceUsageAnalysis.vue'
import SpaceCategoryAnalysis from '@/components/analysis/SpaceCategoryAnalysis.vue'
import SpaceTagAnalysis from '@/components/analysis/SpaceTagAnalysis.vue'
import SpaceSizeAnalysis from '@/components/analysis/SpaceSizeAnalysis.vue'
import SpaceUserAnalysis from '@/components/analysis/SpaceUserAnalysis.vue'
import SpaceRankAnalysis from '@/components/analysis/SpaceRankAnalysis.vue'
import { computed, onMounted, ref } from 'vue'

import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const selectedKey = ref('1')

const spaceId = computed(() => route.query.spaceId)

const queryPublic = computed(() => !!route.query.queryPublic)

const queryAll = computed(() => !!route.query.queryAll)

// 校验
const checkAuth = () => {
  if (!(route.query.spaceId || route.query.queryAll || route.query.queryPublic)) {
    router.push('/')
  }
}
onMounted(() => {
  checkAuth()
})
</script>

<style scoped lang="scss"></style>
